{% extends 'base/base.html' %}



{% block title %}
今天，你吃了吗
{% endblock %}


{% block main %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h3>今天吃什么? - {{ today|date:"Y年m月d日" }}</h3>
            </div>
            <div class="card-body">
                <form method="post" action="{% url 'main:save_daily_record' %}">
                    {% csrf_token %}
                    <input type="hidden" name="date" value="{{ today|date:'Y-m-d' }}">

                    <div class="row mb-4">
                        <div class="col-md-4">
                            <h5>早餐</h5>
                            {% if breakfast_rec %}
                            <div class="card food-card mb-2">
                                <div class="card-body">
                                    <h6 class="card-title">{{ breakfast_rec.name }}</h6>
                                    <p class="card-text text-muted small">{{ breakfast_rec.category.name }}</p>
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#foodModal" data-food-id="{{ breakfast_rec.id }}">
                                        详情
                                    </button>
                                </div>
                            </div>
                            {% endif %}
                            <select class="form-select" name="breakfast">
                                <option value="">-- 选择早餐 --</option>
                                {% for food in all_foods %}
                                <option value="{{ food.id }}" {% if today_record.breakfast.id == food.id %}selected{% endif %}>
                                    {{ food.name }} ({{ food.category.name }})
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-4">
                            <h5>午餐</h5>
                            {% if lunch_rec %}
                            <div class="card food-card mb-2">
                                <div class="card-body">
                                    <h6 class="card-title">{{ lunch_rec.name }}</h6>
                                    <p class="card-text text-muted small">{{ lunch_rec.category.name }}</p>
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#foodModal" data-food-id="{{ lunch_rec.id }}">
                                        详情
                                    </button>
                                </div>
                            </div>
                            {% endif %}
                            <select class="form-select" name="lunch">
                                <option value="">-- 选择午餐 --</option>
                                {% for food in all_foods %}
                                <option value="{{ food.id }}" {% if today_record.lunch.id == food.id %}selected{% endif %}>
                                    {{ food.name }} ({{ food.category.name }})
                                </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-4">
                            <h5>晚餐</h5>
                            {% if dinner_rec %}
                            <div class="card food-card mb-2">
                                <div class="card-body">
                                    <h6 class="card-title">{{ dinner_rec.name }}</h6>
                                    <p class="card-text text-muted small">{{ dinner_rec.category.name }}</p>
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#foodModal" data-food-id="{{ dinner_rec.id }}">
                                        详情
                                    </button>
                                </div>
                            </div>
                            {% endif %}
                            <select class="form-select" name="dinner">
                                <option value="">-- 选择晚餐 --</option>
                                {% for food in all_foods %}
                                <option value="{{ food.id }}" {% if today_record.dinner.id == food.id %}selected{% endif %}>
                                    {{ food.name }} ({{ food.category.name }})
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <h5>零食/加餐</h5>
                        <select class="form-select" multiple name="snacks">
                            {% for food in all_foods %}
                            <option value="{{ food.id }}" {% if food in today_record.snacks.all %}selected{% endif %}>
                                {{ food.name }} ({{ food.category.name }})
                            </option>
                            {% endfor %}
                        </select>
                        <div class="form-text">按住Ctrl键可选择多个</div>
                    </div>

                    <div class="mb-3">
                        <label for="notes" class="form-label">备注</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3">{{ today_record.notes|default:'' }}</textarea>
                    </div>

                    <button type="submit" class="btn btn-success">保存今日记录</button>
                    <button type="button" class="btn btn-outline-primary" id="randomizeBtn">重新随机推荐</button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card stats-card">
            <div class="card-header">
                <h5>本周统计</h5>
            </div>
            <div class="card-body">
                <p>本周已记录: {{ week_records_count }} 天</p>
                <p>最常吃的类别: {{ top_category|default:"暂无" }}</p>
                <a href="{% url 'main:history' %}" class="btn btn-outline-primary btn-sm">查看完整历史</a>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h5>快速操作</h5>
            </div>
            <div class="card-body">
                <a href="{% url 'main:add_food' %}" class="btn btn-outline-warning mb-2">添加新食物</a>
                <a href="{% url 'main:food_library' %}" class="btn btn-outline-secondary mb-2">浏览食物库</a>
                <a href="{% url 'main:recipe_list' %}" class="btn btn-outline-success mb-2">做菜指南</a>
                <a href="{% url 'main:preferences' %}" class="btn btn-outline-info mb-2">设置偏好</a>
                <a href="{% url 'main:caipu_list' %}" class="btn btn-outline-primary mb-2">菜谱</a>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h5>标签</h5>
            </div>
            <div class="card-body">
                {% if parent_tags %}
                <ul class="list-unstyled">
                    {% for p in parent_tags %}
                    <li class="mb-2">
                        <span class="badge" style="background-color: {{ p.color }}; color: #fff;">{{ p.name }}</span>
                        {% if p.children.all %}
                        <div class="ms-2 mt-1">
                            {% for c in p.children.all %}
                            <span class="badge me-1" style="background-color: {{ c.color }}; color: #fff;">{{ c.name }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p class="text-muted">暂无标签</p>
                {% endif %}
                <a href="{% url 'main:tag_list' %}" class="btn btn-sm btn-outline-secondary">管理标签</a>
            </div>
        </div>
    </div>
</div>

<!-- Food Detail Modal -->
<div class="modal fade" id="foodModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">食物详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="foodModalBody">
                <!-- Content will be loaded via AJAX -->
            </div>
        </div>
    </div>
</div>

{% endblock %}


{% block js %}
    <script>
        document.getElementById('randomizeBtn').addEventListener('click', function() {
        location.reload();
            });

// Food modal AJAX
        var foodModal = document.getElementById('foodModal')
        foodModal.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget
            var foodId = button.getAttribute('data-food-id')

    fetch('/food-detail/' + foodId + '/')
        .then(response => response.json())
        .then(data => {
            document.getElementById('foodModalBody').innerHTML = `
                <h6>${data.name}</h6>
                <p><strong>类别:</strong> ${data.category}</p>
                <p><strong>描述:</strong> ${data.description}</p>
                <p><strong>标签:</strong> ${data.tags}</p>
            `;
        });
});


    </script>

{% endblock %}